<template>
  <div class="div-pop" catchtouchmove="true">
    <div class="get-user-info">
      <div class="top-nav" :style="'height: '+ spaceBarHeight + 'px; padding-top: '+ statusBarTop + 'px;'">
        <div class="flex-center v-align-c">
          <span class="back-btn" v-if="showBackBtn" @click="backPage"></span>
          <label class="top-txt">登录</label>
        </div>
      </div>
      <div class="align-c pad-l-30 pad-r-30 mar-l-15 mar-r-15">
        <img class="width-115 height-122 pic-bar" v-if="fileSpace" mode="widthFix"
                :src="fileSpace + '/images/w-icon-none.png'"/>
        <div class="info-content">
          <div class="font-17 mar-t-15 mar-b-6 title-1">暂无权限</div>
          <div class="font-15 info-des">
            <p>您当前的账号未获得批发权限</p>
            <p>请联系客服获取权限~</p>
          </div>
          {{hiddenAuthority}}
          <div class="width-230" v-if="hiddenAuthority === 1">
            <button size="default" class="apply-button font-17" :class="{'apply': status === 0}" @click="applyWholesale">
              {{status === 0 ? '申请中' : '申请批发权限'}}
            </button>
          </div>
          <div class="width-230">
            <button size="default" class="primary-button font-17" @click="customerLayer">
              联系客服
            </button>
          </div>
          <!-- 需求：暂先隐藏 -->
          <!-- <div class="bottom-txt pad-t-10 font-12 font-color-c">已有<span>{{ limitCount }}</span>位用户获得批发权限</div> -->
        </div>
      </div>
      <van-overlay :show="layerBoolean">
        <get-customer-layer></get-customer-layer>
      </van-overlay>
    </div>
  </div>
</template>

<script>
  import GetCustomerLayer from '@/components/GetCustomerLayer'
  // import Dialog from '../../../static/components/vant-weapp/dialog'

  export default {
    components: { GetCustomerLayer },
    props: {
      limitCount: {
        type: String,
        default: ''
      },
      applyStatus: {
        default: null
      },
      hiddenAuthority: {
        default: 0
      },
      showBackBtn: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        isComponents: true,
        userInfo: {},
        hasLimitInfo: false,
        spaceBarHeight: 0,
        statusBarTop: 0,
        layerBoolean: false
      }
    },
    computed: {
      status() {
        return this.applyStatus
      }
    },
    onLoad() {
      // 初始化data
      Object.assign(this.$data, this.$options.data())
      this.spaceBarHeight = this.$pt.getSystemInfoSync()['statusBarHeight'] + 44
      this.statusBarTop = this.spaceBarHeight - 38
    },
    mounted() {
      this.initEls()
    },
    methods: {
      backPage() {
        this.$emit('showPage')
      },
      customerLayer() {
        this.layerBoolean = true
      },
      initEls() {
        const scanApply = this.$pt.getStorageSync('scanApply')
        if (scanApply) {
          let wholesaleAuthority = this.$pt.getStorageSync('wholesaleAuthority')
          if (this.status === 2 || this.status === null || (this.status === 1 && wholesaleAuthority === 0)) {
            this.$pt.navigateTo({ url: '/pages/home/apply-wholesale/main' })
            return
          }
        }
        // 获取申请批发状态，如果审核失败，显示失败弹窗
        if (this.status === 2) {
          this.$pt.showModal({
            title: '温馨提示',
            confirmText: '朕知道了',
            showCancel: false,
            content: '您的申请已被拒绝，请联系客服查明原因~',
            success: res => {
            }
          })
        }
      },
      applyWholesale() {
        if (this.status === 0) return
        this.$pt.navigateTo({ url: '/pages/home/apply-wholesale/main' })
      }
    }
  }
</script>

<style scoped lang="less"> 
  .get-user-info {
    width: 375px;
    height: calc(100vh);
    background-color: #fff;
    /deep/ .van-transition {
      z-index: 100!important;
    }
    .info-content{
      position: relative;
      z-index: 57;
      text-align: center;
    }
    .pic-bar{
      margin-top: 158px;
      background: #fff;
      position: relative;
      z-index: 60;
    }
    .title-1{
      color: #292929;
    }
    .info-des{
      text-align: center;
      color: #818181;
    }
    .steps{
      text-align: center;
      color: #818181;
    }
    .primary-button{
      background: linear-gradient(to right, #ff8e4b, #ff4e25);
      color: #fff;
      border-radius: 50px;
      margin-top: 24px;
      padding: 1px 0;
    }
    .apply-button{
      background-color: white;
      border: 1px solid #ff8e4b;
      border-radius: 50px;
      color: #ff8e4b;
      margin-top: 46px;
    }
    .apply{
      color: #bbbbbb;
      border: 1px solid #bbbbbb;
    }
    .bottom-txt{
      span{
        color: #FF4E23;
      }
    }
    .top-nav{
      background: #ff6529;
      color: #fff;
      height: 100px;
      padding-top: 29px;
      box-sizing: border-box;
      text-align: center;
      font-size: 15px;
      position: fixed;
      width: 100%;
      left: 0;
      top: 0;
      z-index: 50;
      .top-txt{
        font-size: 18px;
      }
      .back-btn{
        width: 24rpx;
        height: 24rpx;
        border-top: 2px solid #fff;
        border-left:2px solid #fff;
        transform: rotate(-45deg);
        position: relative;
        left: -300rpx;
    }
    }
  }
</style>
